<template>
  <div class="grid-content">
    <grid-item-one title="区域能源消耗总量"></grid-item-one>
    <grid-item-two title="区域双控控制形势"></grid-item-two>
    <grid-item-three title="区域能源消耗排行"></grid-item-three>
  </div>
</template>

<script>
import GridItemOne from './grid-item-one'
import GridItemTwo from './grid-item-two'
import GridItemThree from './grid-item-three'

export default {
  name: 'energy-efficiency-analysis-area',
  components: {
    GridItemOne,
    GridItemTwo,
    GridItemThree
  },
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .grid-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: $gutter;

    .content-block {
      background: white;
      border-radius: 4px;
    }

    .block-1 {
      grid-column-start: 1;
      grid-column-end: 3;
    }

    ::v-deep .info-head {
      padding: 20px $gutter 0 $gutter;
      font-size: 16px;
    }
  }
</style>
